<template>
  <div class="common-layout">
    <el-container class="content">
      <el-aside class="lefdiv">

        <el-menu
        active-text-color="#ff0000"
        background-color="#222832"
        class="el-menu-vertical-demo"
        :default-active="routerpath"
        :default-openeds="[0]"
        text-color="#fff"
        :router="true"
     
      >
        <el-sub-menu v-for="(item,index) in routerArray" :key="item.id" :index="index">
          <template #title>
            <el-icon><location /></el-icon>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item v-for="(son) in item.children" :key="son.path" :index="son.path">
              <el-icon><location /></el-icon>
              {{ son.sontite }}
            </el-menu-item>
            <!-- <el-menu-item index="/index/dashboard"><el-icon><location /></el-icon>Dashboard</el-menu-item> -->
            <!-- <el-menu-item index="/index/addgoods"><el-icon><location /></el-icon>添加商品</el-menu-item> -->
         
          </el-menu-item-group>
         
         
        </el-sub-menu>
        <!-- <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>Dashboard</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/index/system"><el-icon><location /></el-icon>系统介绍</el-menu-item>
            <el-menu-item index="/index/dashboard"><el-icon><location /></el-icon>Dashboard</el-menu-item>
            <el-menu-item index="/index/addgoods"><el-icon><location /></el-icon>添加商品</el-menu-item>
          </el-menu-item-group>
         
         
        </el-sub-menu> -->
        
       
      </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          {{ title }}
        </el-header>
        <el-main>
          主要内容
          <router-view></router-view>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>
  
  <script setup>
  import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { onMounted,watch, ref, reactive } from 'vue';

import {useRoute} from "vue-router";
const route=useRoute();

const title=ref("");
const routerpath=ref("")
onMounted(()=>{
   routerpath.value=route.path;
})
watch(()=>route.meta.title,(n,o)=>{
    // console.log(n,o);
    title.value=n;
},{immediate:true})

// 下面是路由 循环

const routerArray=reactive([
  {
    id:1,
    title:"Dashboard",
    children:[
      {
        sontite:"系统介绍",
        path:"/index/system"
      },
      {
        sontite:"Dashboard",
        path:"/index/dashboard"
      },
      {
        sontite:"添加商品",
        path:"/index/addgoods"
      },

    ]
  },
  {
    id:2,
    title:"首页配置",
    children:[
      {
        sontite:"轮播图配置",
        path:"/index/loopimgset"
      },
      {
        sontite:"热销商品配置",
        path:"/index/hotgoodsset"
      },
      {
        sontite:"新品上线配置",
        path:"/index/newgoodsset"
      },
      {
        sontite:"为你推荐配置",
        path:"/index/recomment"
      },

    ]
  },
  {
    id:3,
    title:"模块管理",
    children:[
      {
        sontite:"分类管理",
        path:"/index/typemanger"
      },
      {
        sontite:"商品管理",
        path:"/index/goodsmanger"
      },
      {
        sontite:"会员管理",
        path:"/index/vipmanger"
      },
      {
        sontite:"订单管理",
        path:"/index/ordermanger"
      },

    ]
  },
  {
    id:4,
    title:"系统管理",
    children:[
      {
        sontite:"修改密码",
        path:"/index/updatepwd"
      }

    ]
  }
])


  </script>
  
  <style lang="scss" scoped>
    .content{
      .lefdiv::-webkit-scrollbar {
          display:none; 
      }
      height: 100vh;
      background: #dedede;
      .lefdiv{
         background: #222832;
         color: white;
      }
    }
  </style>